<%@ page import="java.math.BigDecimal" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>订单确认页面</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        .trim{
            width: 1300px;
            margin-left: 350px;
            height: 3px;
            background-color: #E66F23;
        }
        .detail{
            width: 1300px;
            margin-top: 10px;
            margin-left: 350px;
            height: 25px;
            text-align: left;
            font-size: 13px;
            line-height: 25px;
        }
        .mycart{
            width: 1300px;
            height: 80px;
            /* border: 1px solid black; */
            margin-left: 350px;
            margin-top: 10px ;
            background-color: #F7F5F6;
        }
        .mycart td[class="mycart-1"]{
            width: 320px;
        }
        .mycart td[class="mycart-2"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-3"]{
            width: 280px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-4"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart-1{
            height: 90px;
            float: left;
        }
        .mycart-2,.mycart-3,.mycart-4{
            background-image: url(${pageContext.request.contextPath}/img/licurrent_bg.gif) ;
            background-repeat: no-repeat;
            background-position: center;
        }
        .mycart-3{
            color: red;
        }
        .order-info{
            width: 1300px;
            height: 720px;
            margin-left: 350px ;
            margin-top: 10px ;
            border: 1px solid #848484;
            border-collapse: collapse;
            font-size: 16PX;
            font-family: 宋体;
        }
        table tr[class="order-info1"]{
            height: 35px;
            border: 1px solid #848484;
            background-color: #f5f5f5;

        }
        table tr[class="order-info2"]{
            margin-top: 20px;
            height: 35px;
            /* border: 1px solid #848484; */
        }
        .order-info-text{
            font-weight: bold;
        }
        .order-info2-1,.order-info2-2{
            margin-left: 30px;
            margin-right: 30px;
        }
        .order-info2-2{
            margin-left: 60px;
            background-color: #F7F7F7;
            color: #CB5913;
        }
        .order-info2-1{
            height: 3px;
            background-color: #DB772B;
        }
        table tr[class="order-info3"]{
            margin-top: 10px;
            height: 90px;
            /* border: 1px solid #848484; */
        }
        .address{
            width: 1200px;
            height: 140px;
            margin-top: 10px ;
            margin-left: 60px;
            border: 1px solid #848484;
            border-collapse: collapse;
            background-color: #fffdf1;
        }
        .address1{
            margin-top: 5px;
            height: 50px;

        }
        .address1 font{
            margin-left: 40px;
            /* border: 1px solid #848484; */
            font-size: 18px;
        }
        .address1-1{
            margin-left: 30px;
            margin-right: 30px;
            border-bottom: 2px solid  #DB772B;
            box-sizing: border-box;
        }
        .address2{
            height: 45px;
            /* border: 1px solid #848484; */
        }
        .address2-1{
            margin-top: 5px;
            width: 60px;
            margin-left: 30px;
            text-align: center;
        }
        .address2-2{
            margin-left: 20px;
            width: 70px;
            text-align: center;
        }
        .address2-3{
            margin-left: 20px;
            text-align: center;
        }
        .order-info7{
            /* width: 1200px; */
            height: 30px;
            margin-top: 10px ;
            margin-left: 60px;
            /* border: 1px solid #848484; */
        }
        .order-info7-1{
            margin-left: 60px;
            width: 200px;
            /* height: 30px; */
            padding-left: 10px;
            background-color: #F7F7F7;
            line-height: 30px;
            float: left;
            border: 1px solid #848484;
            box-sizing: border-box;
        }
        .order-info7-2{
            float: left;
            width: 1000px;
            line-height: 30px;
            padding-left: 5px;
            border: 1px solid #848484;
            box-sizing: border-box;
        }
        table tr[class="order-info8"]{
            height: 90px;
            border: 1px solid black;
        }
        table tr[class="order-info9"]{
            height: 304px;
            border: 1px solid black;
        }
        .order-info td[class="order-info1-1"]{
            padding-left:30px ;
            box-sizing: border-box;
        }
        .content{
            width: 1200px;
            height: 304px;
            margin-top: 10px ;
            margin-left: 50px;
            border: 1px solid #848484;
            border-collapse: collapse;
        }
        .content tr[class="content-row1"]{
            height: 34px;
            border: 1px solid #848484;
            background-color: #F5F5F5;
            border-width: 1px;
        }
        tr[class="content-row1"]>td{
            border: 1px solid #848484;
        }
        .content tr[class="content-row2"]{
            height: 90px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row3"]{
            height: 90px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row4"]{
            height: 90px;
            border-style:"border 1px solid #848484" ;
            border-bottom: 1px solid #848484;
        }
        .content td{
            text-align: center;
            font-size: 13px;
        }
        .content td[class="content-col2"]{
            width: 155px;
        }
        .content td[class="content-col3"]{
            width: 540px;
        }
        .content td[class="content-col4"]{
            width: 110px;
        }
        .content td[class="content-col5"]{
            width: 110px;
        }
        .content td[class="content-row5-1"]{
            text-align: right;
            font-size: 13px;
        }
        .content td[class="content-col1"]{
            text-align: left;
        }
        .content img{
            padding-top: 0px;
            height: 80px;
            box-sizing: border-box;
            border: 1px solid #848484;
        }
        .content-row5-2{
            color: #F06C12;
            padding-right: 20PX;
            font-size: 13px;
        }
        .content-font{
            color: #6E6868 ;
        }
        .settle{
            width: 1300px;
            height: 230px;
            margin-left: 350px ;
            margin-top: 10px ;
            font-weight: bold;
            border: 1px solid #848484;
            border-collapse: collapse;
        }
        .settle1{
            margin-top:3px ;
            height: 34px;
        }
        .settle1-1{
            line-height: 34px;
            margin-left: 40px;
        }
        .settle2{

        }
        .settle2-1{
            border-top: 2px solid #BA8E62;
            width: 1200px;
            height: 50px;
            margin-left: 30px;
            margin-right: 30px;
            background-color: #FEF7E7;
            line-height: 50px;
            padding-left: 30px;
            /* border-top: 2px solid #BA8E62; */
        }
        .settle3{
            height: 60px;
        }
        .settle3-1{

            width: 1200px;
            height: 50px;
            margin-left: 30px;
            margin-right: 30px;
            background-color: #FEF7E7;
            line-height: 50px;
            padding-left: 30px;
            text-align: center;
        }
        .settle3-11{
            color: #8b130e;
        }

        .settle4{
            height: 5px;
            /* border: 1px dashed #848484; */
        }
        .settle5{
            margin-top: 5px;
            height: 70px;
            margin-left: 30px;
            margin-right: 30px;
        }
        .settle5-1{
            width: 190px;
            height: 45px;
            margin-left: 1070px;
            background-color: #cf4808;
            color: white;
            line-height: 45px;
            border-radius: 5px;
            text-align: center;

        }
        .settle5-1 a{
            text-decoration: none;
            color: white;
        }

    </style>

</head>
<body>
<%--商城抬头--%>
<%@include file="headtop.jsp"%>

<div class="trim"></div>

<div class="detail">
    您当前的位置:&nbsp;
    <a href="#">首页</a>
    &rsaquo;&rsaquo;填写核对订单信息
</div>

<table class="mycart">
    <tr>
        <td>
            <img class="mycart-1" src="${pageContext.request.contextPath}/img/cart_logo.jpg" />
        </td>
        <td class="mycart-2">1、查看购物车</td>
        <td class="mycart-3">2、填写核对订单信息</td>
        <td class="mycart-4">3、成功提交订单</td>
        <td></td>
    </tr>
</table>

<table  class="order-info" >
    <tr  class="order-info1">
        <td colspan="5" class="order-info1-1">
            <font class="order-info-text">填写核对订单信息</font>
        </td>
    </tr>
    <tr  class="order-info2">
        <td  class="order-info2" colspan="5">
            <div class="order-info2-1"></div>
            <div class="order-info2-2">
                <font class="order-info-text">收货人信息</font>
            </div>
        </td>
    </tr>
    <tr colspan="5" class="order-info3">
        <td class="order-info3">
            <table class="address">
                <tr class="address1" id="address1">
                    <td class="address1" colspan="3">
                        <font class="order-info-text">常用收货地址</font>
                        <div class="address1-1"></div>
                    </td>
<%--                    地址内容ajax动态刷新 --%>
                </tr>
            </table>
        </td>
    </tr>

    <tr  class="order-info2">
        <td  class="order-info2" colspan="5">
            <div class="order-info2-1"></div>
            <div class="order-info2-2">
                <font class="order-info-text">支付方式</font>
            </div>
        </td>
    </tr>
    <tr class="order-info7">
        <td class="order-info71" colspan="2" >
            <div class="order-info7-1">
                <input type="radio" checked="checked"/>
                支付宝
            </div>
            <div class="order-info7-2">
                支付手续费:￥0
            </div>
        </td>
    </tr>
    <tr  class="order-info2">
        <td  class="order-info2" colspan="5">
            <div class="order-info2-1"></div>
            <div class="order-info2-2">
                <font class="order-info-text">购买的商品</font>
            </div>
        </td>
    </tr>

    <tr class="order-info9">
        <td colspan="5" >
            <table  class="content">
                <tr class="content-row1"  >
                    <td class="content-col2">图片</td>
                    <td class="content-col3">商品名称</td>
                    <td class="content-col4">单价</td>
                    <td class="content-col5">数量</td>
                    <td class="content-col6">小计</td>
                </tr>
<%--                订单内容列表循环显示  --%>
                <c:forEach items="${newMyCart}" var="cart" varStatus="status">
                <tr class="content-row2">
                    <td>
                        <img src="${pageContext.request.contextPath}/img/${cart.goods.image}" />
                    </td>
                    <td class="content-col1">
                        <a href="javascript:void(0)">
                            ${cart.goods.name}
                        </a>
                    </td>
                    <td class="content-font">
                        ￥${cart.price}
                    </td>
                    <td>
                        ${cart.nums}
                    </td>
                    <td class="content-font">
                        ￥<font class="content-row5-2">${cart.price*cart.nums}</font>
                    </td>
                </tr>
                </c:forEach>

            </table>
        </td>
    </tr>
</table>
<table  class="settle">
    <tr class="settle1">
        <td>
            <div class="settle1-1">
                结算信息
            </div>
        </td>
    </tr>
    <tr class="settle2">
        <td>
            <div class="settle2-1">
                商品总金额:<font class="settle3-11">￥${totalPrices}</font>+运费  总计:<font class="settle3-11">￥${totalPrices}</font>
            </div>
        </td>
    </tr>
    <tr class="settle4">
        <td>
            <div class="settle4"></div>
        </td>
    </tr>
    <tr class="settle3">
        <td>
            <div class="settle3-1">
                应付总额:<font class="settle3-11">￥${totalPrices}</font>元
            </div>
        </td>
    </tr>

    <tr class="settle5">
        <td>
            <div class="settle5-1">
                <a href="javascript:void(0)" onclick="create()">
                    确认无误，提交订单
                </a>
                <input style="display: none" id="getAddressId" value="0"></input>
            </div>
        </td>
    </tr>
</table>
<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>
</body>
<script>

    $(function () {
        $.post("${pageContext.request.contextPath}/address/findAllByUserId","",function (data) {
            //alert(data);
            let str = "";
            for (i in data){
                // var index = 0;
                str = '<tr class="address2">\n' +
                    '                    <td  >\n' +
                    '                        <div class="address2-1">\n' +
                    '                            <input type="checkbox" class="addressbox" name="address" onclick="checkAddress(this)" value='+data[i].id+""+' />'+ data[i].accept+'\n' +
                    '                        </div>\n' +
                    '                    </td>\n' +
                    '                    <td class="address2-2">\n' +
                    '                       '+ data[i].telphone+'</td>\n' +
                    '                    <td class="address2-3">\n' +
                    '                        '+data[i].province+data[i].city+data[i].area+data[i].address+'\n' +
                    '                    </td>\n' +
                    '                </tr>'
                // alert(str);
                if (data[i].type == 1){
                    $(".addressbox").attr("checked","checked");
                    // alert( $(".addressbox").val());
                  //  $("#getAddressId").val(data[i].id) ;//将默认选中的id赋值
                    // alert(data[i].id);
                    //alert($("#getAddressId").html());
                }
                //在地址栏后面添加
                $("#address1").after(str);
            }
        },"json")
    })
    // alert($("#getAddressId").val());
    var addressID = $("#getAddressId").val();//默认选中的id值
    //alert(addressID);
    //地址栏只能选中一个
    function checkAddress(obj){
        let ss= document.getElementsByName("address");
        for (let i = 0; i < ss.length; i++) {
            ss[i].checked = false;
        }
        obj.checked = true;
        //alert($(obj).val());//获取选中地址的id
        addressID = $(obj).val();//将选中的地址赋值
    }
    function checkedDefault() {
        $("input[name='address']:checked").each(function(){
            addressID = $(this).val();
            //alert(addressID);
        });
    }
    //创建订单跳转
    function create() {
        checkedDefault();//获取选中的地址
        $.ajax({
            url: "${pageContext.request.contextPath}/order/createTrueOrder",
            type:"post",
            cache: false,
            data:{
                addressid:addressID
            },
            async:"false",
            dataType:"json",
            success: function(data){
                if(data.flag){//订单创建成功
                    alert(data.flag);
                    location.href="${pageContext.request.contextPath}/jspPage/submit.jsp";
                }else {//创建失败，提示信息
                    alert(data.massage);
                    location.reload();//重新加载
                }
            }
        });
    }
</script>

</html>